<!doctype html>
<html>
    <head>
        <title>鹰眼手册 - HT for Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css">
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white;
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;
            }
            .logo{
                vertical-align: middle;
            }

        </style>
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }

                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];

                    // a small hack to make it work on android
                    iframe.ontouchstart = func;

                    if (window.location && window.location.hostname && window.location.hostname.indexOf('hightopo') >= 0) {
                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '<a href="https://hightopo.com/codeeditor/index.html?url=' + iframe.contentWindow.location.pathname + '" target="_blank">在线编辑</a>';
                        iframe.parentNode.insertBefore(div, iframe);

                        var div = document.createElement('div');
                        div.style.float = 'left';
                        div.innerHTML = '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;';
                        iframe.parentNode.insertBefore(div, iframe);
                    }

                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }
            }
        </script>
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 鹰眼手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a> </li><li><a href="#ref_component">鹰眼组件</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>的鹰眼组件为<code>ht.graph.GraphView</code>组件提供了全局鸟瞰图的功能，并支持在鹰眼上直接定位、缩放等导航功能。</p>

<p>使用鹰眼组件需要在引入<code>ht.js</code>核心库之后，再引入一个<code>ht-overview.js</code>的鹰眼插件库。</p>

<p><iframe src="examples/example_overview.html" style="height:400px"></iframe></p>

<div id="ref_component"></div>

<h2>鹰眼组件</h2>

<p><code>ht.graph.Overview</code>为鹰眼组件类，其主要可配置属性和函数如下：</p>

<ul><li><code>ht.graph.Overview</code>构造函数传入其所绑定的<code>ht.graph.GraphView</code>组件对象</li><li>通过<code>getMaskBackground</code>和<code>setMaskBackground</code>获取和设置可见区域遮罩背景颜色</li><li>通过<code>getContentBorderColor</code>和<code>setContentBorderColor</code>获取和设置内容边框颜色</li><li>通过<code>getContentBackground</code>和<code>setContentBackground</code>获取和设置内容背景颜色</li><li>通过<code>isAutoUpdate</code>和<code>setAutoUpdate</code>获取和设置是否自动同步绑定的<code>GraphView</code>组件变化</li></ul>

<p><iframe src="examples/example_toggle.html" style="height:400px"></iframe></p>

<pre><code>var ToggleOverview = function(graphView) {
    var self = this;
    ToggleOverview.superClass.constructor.apply(self, [graphView]);                
    self._expand = true;

    var div = document.createElement(&quot;div&quot;);
    div.style.setProperty(&quot;width&quot;, &quot;24px&quot;, null);
    div.style.setProperty(&quot;height&quot;, &quot;24px&quot;, null);
    div.style.setProperty(&quot;position&quot;, &quot;absolute&quot;, null);
    div.style.setProperty(&quot;right&quot;, &quot;0&quot;, null);
    div.style.setProperty(&quot;top&quot;, &quot;0&quot;, null);
    div.style.setProperty(&quot;background&quot;, &quot; url(shrink.png) no-repeat&quot;, null);
    div.style.setProperty(&quot;background-position&quot;, &quot;center center&quot;, null);                
    self._view.appendChild(div);

    function handleTransitionEnd(e) {
        if (e.propertyName === &quot;width&quot;){
            self.invalidate();
        }                    
    }
    self._view.addEventListener(&quot;webkitTransitionEnd&quot;, handleTransitionEnd, false);
    self._view.addEventListener(&quot;transitionend&quot;, handleTransitionEnd, false);
    var eventName = ht.Default.isTouchable ? &quot;touchstart&quot; : &quot;mousedown&quot;;
    div.addEventListener(eventName, function(e) {
        if (self._expand) {
            self._view.style.setProperty(&quot;width&quot;, &quot;24px&quot;, null);
            self._view.style.setProperty(&quot;height&quot;, &quot;24px&quot;, null);
            self._canvas.style.setProperty(&quot;opacity&quot;, &quot;0&quot;, null);
            self._mask.style.setProperty(&quot;opacity&quot;, &quot;0&quot;, null);
            div.style.setProperty(&quot;background-image&quot;, &quot;url(expand.png)&quot;, null);
            div.style.setProperty(&quot;width&quot;, &quot;24px&quot;, null);
            div.style.setProperty(&quot;height&quot;, &quot;24px&quot;, null);
            self._expand = false;
        } else {
            self._view.style.setProperty(&quot;width&quot;, &quot;&quot;, null);
            self._view.style.setProperty(&quot;height&quot;, &quot;&quot;, null);
            self._canvas.style.setProperty(&quot;opacity&quot;, &quot;1&quot;, null);
            self._mask.style.setProperty(&quot;opacity&quot;, &quot;1&quot;, null);
            div.style.setProperty(&quot;background-image&quot;, &quot;url(shrink.png)&quot;, null);
            div.style.setProperty(&quot;width&quot;, &quot;24px&quot;, null);
            div.style.setProperty(&quot;height&quot;, &quot;24px&quot;, null);
            self._expand = true;
        }                    
        self.invalidate();                     
        e.stopPropagation();
    });
    self.setContentBackground(&quot;white&quot;);
};
ht.Default.def(ToggleOverview, ht.graph.Overview, {                
});

function init() {                
    var dataModel = new ht.DataModel(),
        graphView = new ht.graph.GraphView(dataModel),
        overview = new ToggleOverview(graphView);

    dataModel.deserialize(topology);    
    graphView.getView().className = &#39;main&#39;;
    overview.getView().className = &quot;overview animation&quot;;
    document.body.appendChild(graphView.getView());
    document.body.appendChild(overview.getView());

    window.addEventListener(&#39;resize&#39;, function(e) {
        graphView.invalidate();
    }, false);

}</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
